<template>
  <div class="tel-wrap" v-if="isShow">
    <div class="tel">
      <img src="@/static/person.png" />
			<div class="tel-right">
				<p class="tel-right-title">客服热线</p>
				<strong class="tel-right-phone">400-877-3601</strong>
				<div class="tel-right-btn" @click="btnConsult">在线咨询</div>
			</div>
			<img @click="btnClose" class="btnClose" src="@/static/close2.png" />
    </div>
    <Dialog ref="dialog" />
  </div>
</template>
<script>
import { mobileConsult, browserRedirect } from '@/components/mobileConsult.js'
import $ from 'jquery'
export default {
  props: {
	},
	data () {
		return {
      isShow: true
    }
	},
	methods: {
		btnClose () {
			this.isShow = !this.isShow
		},
    btnConsult () {
      if (!browserRedirect()) {
        this.$refs.dialog.action()
      }
    }
  },
  mounted () {
		const t = setTimeout(() => {
			$('.tel').animate({'left': '20px'}, 500)
			clearInterval(t)
		}, 3000)
  }
}
</script>
<style lang="sass" scoped>
@media screen and (max-width: 750px)
  .tel-wrap
    display: none
@media screen and (min-width: 750px)
	.tel-wrap
		width: 327px
		.tel
			width: 327px
			height: 152px
			background: #fff
			border-radius: 8px
			position: fixed
			z-index: 2000
			bottom: 20px
			left: -400px
			box-shadow: 0px 6px 16px rgba(19, 27, 39, 0.1)
			img
				width: 88px
				height: 88px
				position: absolute
				top: 32px
				left: 20px
				border-radius: 50%
			.tel-right
				position: absolute
				top: 20px
				left: 124px
				.tel-right-title
					font-size: 14px
					line-height: 20px
					color: rgba(48, 54, 64, 0.5)
					margin: 0
					margin-bottom: 8px
				.tel-right-phone
					font-size: 24px
					line-height: 32px
					color: #282C32
				.tel-right-btn
					text-align: center
					border-radius: 4px
					color: #fff
					background: #F57033
					box-shadow: 0px 4px 16px rgba(245, 112, 51, 0.5)
					width: 180px
					height: 40px
					line-height: 40px
					font-size: 18px
					margin-top: 12px
					cursor: pointer
					&:hover
						background: #D6551A
			.btnClose
				width: 16px
				height: 16px
				position: absolute
				top: 12px
				left: 300px
				cursor: pointer
</style>
